<template>
  <div class="distribution-container">
    <div class="chart" id="chart_right2"></div>
    <div class="info-container">
      <div class="info-item">
        <div class="icon normal-icon"></div>
        <span>正常设备: {{ normalEquipment }}</span>
      </div>
      <div class="info-item">
        <div class="icon alarm-icon"></div>
        <span>报警设备: {{ alarmEquipment }}</span>
      </div>
      <div class="info-item">
        <div class="icon offline-icon"></div>
        <span>离线设备: {{ offlineEquipment }}</span>
      </div>
      <div class="info-item">
        <div class="icon fault-icon"></div>
        <span>故障设备: {{ faultEquipment }}</span>
      </div>
      <div class="info-item">
        <div class="icon unable-icon"></div>
        <span>未启用设备: {{ unableEquipment }}</span>
      </div>
    </div>
  </div>
</template>


<script>
import * as echarts from 'echarts';
import 'echarts-gl';
import { getsystem } from '@/api/echarts'
export default {
  name: "distribution",
  data() {
    return {
      normalEquipment: 0,
      alarmEquipment: 0,
      offlineEquipment: 0,
      faultEquipment: 0,
      unableEquipment: 0
    }
  },
  created() {
    getsystem().then(res => {
      this.normalEquipment = res.msg.normalEquipment
      this.alarmEquipment = res.msg.alarmEquipment
      this.offlineEquipment = res.msg.offlineEquipment
      this.faultEquipment = res.msg.faultEquipment
      this.unableEquipment = res.msg.unableEquipment
      this.getEchartRight();
    })
  },
  methods: {
  getEchartRight() {
    let myChart = echarts.init(document.getElementById('chart_right2'));
    let option = {
      color: ['#00FFBF', '#FF007F', '#8F00FF', '#FF6F61', '#DFFF00', '#FFAD05', '#4465fc'],
      tooltip: {
        trigger: 'item',
        formatter: '{b} : {c} ({d}%)'
      },
      series: [{
        stack: 'a',
        type: 'pie',
        radius: ['20%', '80%'],
        roseType: 'area',
        zlevel: 10,
        label: {
          show: false // 移除标签文字
        },
        labelLine: {
          show: false // 移除标签线
        },
        data: [{
          value: this.normalEquipment,
          name: '正常'
        }, {
          value: this.alarmEquipment,
          name: '报警'
        }, {
          value: this.offlineEquipment,
          name: '离线'
        }, {
          value: this.faultEquipment,
          name: '故障'
        }, {
          value: this.unableEquipment,
          name: '未启用'
        }]
      }]
    };

    this.myChart = myChart;
    myChart.setOption(option, true);
    window.addEventListener('resize', () => {
      myChart.resize();
    });
  },
  highlightSection(index) {
    this.myChart.dispatchAction({
      type: 'highlight',
      seriesIndex: 0,
      dataIndex: index
    });
  },
  resetHighlight() {
    this.myChart.dispatchAction({
      type: 'downplay',
      seriesIndex: 0
    });
  }
}

};
</script>

<style lang="scss" scoped>
.distribution-container {
  display: flex;
  justify-content: space-between;
  align-items: center;

  .chart {
    height: 20vh;
    width: 50%; // 调整饼图宽度
  }

  .info-container {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    width: 45%;
  }

  .info-item {
    display: flex;
    align-items: center;
    margin-bottom: 10px;

    .icon {
      width: 20px;
      height: 20px;
      margin-right: 10px;
      background-color: rgba(126, 240, 255, 0.7); // 按用户要求的颜色
    }

    .normal-icon {
      background-color: #00FFBF;
    }
    .alarm-icon {
      background-color: #FF007F;
    }
    .offline-icon {
      background-color: #8F00FF;
    }
    .fault-icon {
      background-color: #FF6F61;
    }
    .unable-icon {
      background-color: #DFFF00;
    }
  }
}

</style>
